iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0

上一篇介紹了如何用 CDN 的方式使用 Vue,然後建立一個 Vue 的應用程式,接下來幾天會介紹
在 Vue 裡常用的一些語法。

屬性綁定:v-bind

能夠將 data 和 HTML 的屬性作綁定,只要在欲綁定的屬性前面加上 v-bind: ,而值則是 data 的內容,就可以囉!

讓我們來看下面的範例:

我們來把 message 和 HTML 的 title 屬性綁定

<div id="app">
    <p v-bind:title="message">這是標題</p>
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

這時當你的滑鼠移動到 p 段落上時,就可以看到 message 的內容了。
而這裡一樣可以利用 app.message 的方式直接更改綁定的值,如同上一篇所講的一樣, Vue 是操作資料形態來渲染頁面的。

縮寫

如果覺得每次都要打 v-bind 很麻煩的話,其實他是有縮寫的,讓我們來看看下面例子:

<!-- 完整寫法 -->
<div id="app">
  <p v-bind:title="message">這是標題</p>
</div>
<!-- 縮寫 -->
<div id="app">
  <p :title="message">這是標題</p>
</div>

只要將前面的 v-bind 省略就可以了,有沒有發現很簡單呢?
大家可以用昨天的範例作練習唷!
那麼,明天再見囉!


上一篇
Day 1 : 前言
下一篇
Day 3 : Class 與 Style 的綁定
系列文
Vue 學習筆記 - 讓你30天掌握 Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言